<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24" v-permiss="['search-institution']">
            <el-form-item label="机构名称">
              <el-select style="width: 100%" v-model="page.institutionId" clearable>
                <el-option v-for="item in institutionList" :key="item.name" :label="item.name"
                           :value="item.institutionId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="充值方式">
              <el-select style="width: 100%" v-model="page.topUpType" clearable>
                <el-option v-for="item in topUpType" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="银行名称">
              <el-input v-model="page.bankName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="银行账户">
              <el-input v-model="page.bankAccount"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="交易流水">
              <el-input v-model="page.dealFlow"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="充值时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.createTimeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div style="text-align: right;margin-bottom: 10px;line-height: 32px">
      <span style="color: #409eff;float: left;font-size: 18px">充值总金额 : {{ rechargeTotal }}</span>
      <span style="color: #409eff;float: left;font-size: 18px;margin-left: 10px">赠送总金额 : {{ giveTotal }}</span>
      <el-button  v-permiss="['update-recharge']" type="primary" @click="rechargeVisible.isShow = true">充值</el-button>
    </div>
    <Table :tableData="tableData" :tableColumn="tableColumn" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    >
      <template #topUpType="{row}">
        {{ topUpType.find(item => row.topUpType === item.value).label }}
      </template>
      <template #voucher="{row}">
        <el-image style="width: 100px;height: 100px" v-if="row.voucher" :src="row.voucher"
                  :preview-src-list="[row.voucher]"></el-image>
      </template>
    </Table>

    <Dialog v-model="rechargeVisible.isShow" :title="rechargeVisible.title"
            @cancel="rechargeVisible.isShow = false"
            @close="rechargeClearForm"
            @confirm="rechargeConfirm"
    >
      <el-form label-width="120px" :model="rechargeForm" :rules="rechargeRulesForm" ref="rechargeFormRef">
        <el-form-item label="机构名称" prop="institutionId">
          <el-select style="width: 100%" v-model="rechargeForm.institutionId">
            <el-option v-for="item in institutionList" :key="item.name" :label="item.name"
                       :value="item.institutionId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值方式" prop="topUpType">
          <el-select style="width: 100%" v-model="rechargeForm.topUpType">
            <el-option v-for="item in topUpType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款银行名称" prop="bankName">
          <el-input v-model="rechargeForm.bankName"/>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input v-model="rechargeForm.bankAccount"/>
        </el-form-item>
        <el-form-item label="充值金额" prop="topUpAmount">
          <el-input v-model="rechargeForm.topUpAmount"/>
        </el-form-item>
        <el-form-item label="赠送金额" prop="giveAmount">
          <el-input v-model="rechargeForm.giveAmount"/>
        </el-form-item>
        <el-form-item label="交易流水" prop="dealFlow">
          <el-input v-model="rechargeForm.dealFlow"/>
        </el-form-item>
        <el-form-item label="凭证" prop="voucher">
          <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              ref="upload"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG"
              :http-request="uploadChange"
          >
            <i v-if="!rechargeForm.voucher" class="el-icon-plus avatar-uploader-icon"></i>
            <img v-else style="width: 100%;height: 100%" :src="rechargeForm.voucher">
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="4" v-model="rechargeForm.remark"/>
        </el-form-item>
      </el-form>
    </Dialog>
  </el-card>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from "vue";
import {selectInstitution, uploadImage,} from '@/api/index'
import {insertRecharge, fetchRechargeList, fetchRechargeTotal} from '@/api/institution'
import {ElMessage} from "element-plus";
import {dateFormatTimeStamp} from '@/utils'
const tableColumn = [
  {label: '机构名称', prop: 'name', align: 'center', minWidth: 100},
  {label: '充值方式', prop: 'topUpType', slot: 'topUpType', align: 'center', minWidth: 100},
  {label: '银行名称', prop: 'bankName', align: 'center', minWidth: 100},
  {label: '银行账户', prop: 'bankAccount', align: 'center', minWidth: 100},
  {label: '充值金额', prop: 'topUpAmount', align: 'center', minWidth: 100},
  {label: '赠送金额', prop: 'giveAmount', align: 'center', minWidth: 100},
  {label: '交易流水', prop: 'dealFlow', align: 'center', minWidth: 100},
  {label: '凭证', prop: 'voucher',slot:'voucher', align: 'center', minWidth: 100},
  {label: '备注', prop: 'remark', align: 'center', minWidth: 100},
  {label: '充值时间', prop: 'creationTime', align: 'center', minWidth: 150},
  {label: '操作人', prop: 'inputName', align: 'center', minWidth: 100},
]
const topUpType = [
  {label: '微信', value: 1},
  {label: '支付宝', value: 2},
  {label: '银行卡转账', value: 3},
]
export default {
  name: "RechargeList",
  setup() {
    const rechargeFormRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      rechargeTotal: 0,
      giveTotal: 0,
      tableData: [],
      rechargeVisible: {
        isShow: false,
        title: '账户充值'
      },
      institutionList: [],
      rechargeForm: {},
      rechargeRulesForm: {
        institutionId: [
          {required: true, message: '请选择机构', trigger: 'change'}
        ],
        topUpType: [
          {required: true, message: '请选择充值方式', trigger: 'change'}
        ],
        bankName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        bankAccount: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        topUpAmount: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      }
    })
    const methods = {
      async getTableData() {
        const [datetimeStart, datetimeEnd] = dateFormatTimeStamp(state.page.createTimeValue)
        const params = {
          ...state.page,
          datetimeStart, datetimeEnd
        }
        delete params.createTimeValue
        methods.getTotal(params)
        const res = await fetchRechargeList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      async getTotal(params) {
        const res = await fetchRechargeTotal(params)
        if (res.code === 200) {
          const {totalGiveAmount, totalTopUpAmount} = res.data
          state.rechargeTotal = totalTopUpAmount
          state.giveTotal = totalGiveAmount
        }
      },
      async uploadChange(data) {
        const formData = new FormData()
        formData.append('file', data.file)
        formData.append('type', 0)
        const res = await uploadImage(formData)
        if (res.code === 200) {
          state.rechargeForm.voucher = res.data
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      async getInstitutionSelect() {
        const res = await selectInstitution()
        if (res.code === 200) {
          state.institutionList = res.data
        }
      },
      rechargeClearForm() {
        state.rechargeForm = {}
        rechargeFormRef.value.resetFields()
      },
      rechargeConfirm() {
        rechargeFormRef.value.validate(async v => {
          if (v) {
            const res = await insertRecharge(state.rechargeForm)
            if (res.code === 200) {
              state.rechargeVisible.isShow = false
              methods.getTableData()
              ElMessage.success('添加成功')
            }
          }
        })
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getInstitutionSelect()
    })
    return {
      topUpType,
      rechargeFormRef,
      tableColumn,
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>
